<template>
  <div class="login">
    <div class="login__container">
      <h2 class="header centered">欢迎使用 Gitee Helper</h2>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.password" type="password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">登陆</el-button>
          <el-button @click="onQuick">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { ipcRenderer } from 'electron'
export default {
  name: 'login',
  data () {
    return {
      form: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    verify () {
      if (this.form.username && this.form.password) {
        return true
      }
      this.$message.error('请填写用户名和密码！')
    },
    async onSubmit () {
      if (this.verify()) {
        await this.$store.dispatch('login', this.form)
        this.$router.push('notifications')
      }
    },
    onQuick () {
      window.top.close()
      ipcRenderer.send('quit')
    }
  }
}
</script>
